.root {
  min-height: 100vh;
  box-sizing: border-box;
  font-size: 28px;
  padding-bottom: 20px;
  background-color: #f5f5f5;

  :global {
    .header {
      position: relative;
      height: 180px;

      .user-info {
        position: relative;
        height: 180px;
        background-color: #242528;

        .img {
          position: absolute;
          top: 15px;
          left: 15px;
          width: 108px;
          height: 108px;
          border-radius: 50%;
          overflow: hidden;
        }

        .login {
          position: absolute;
          top: 25px;
          left: 148px;
          font-size: 36px;
          font-weight: 700;
          color: #f18340;
        }

        .desc {
          position: absolute;
          top: 78px;
          left: 148px;
          display: flex;
          font-size: 32px;
          color: #E7E3E3;

          div {
            height: 40px;
            width: 80px;
            line-height: 40px;
            text-align: center;
            margin-right: 15px;
            font-size: 26px;
            border-radius: 8px;
            background-color: rgba(109, 168, 245, 0.884);
          }
        }
      }
    }

    .body {
      width: 708px;
      height: 1462px;
      margin: 20px auto 0;
      padding-bottom: 30px;
      background-color: #fff;

      .title {
        height: 120px;

        .container1 {
          display: flex;
          justify-content: space-between;
          align-items: flex-end;
          height: 70px;
          padding: 0 140px;

          div {
            font-size: 32px;
            font-weight: 700;
            color: #101010;
          }
        }

        .container2 {
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 30px;
          padding: 0 170px;

          div {
            width: 58px;
            height: 4px;
            background-color: #101010;
          }
        }
      }

      .vip-card {
        position: relative;
        width: 656px;
        height: 230px;
        margin: 0 auto;
        border-radius: 20px;
        background-image: linear-gradient(to bottom right, #e9ddcc, #F4CF89);

        div:nth-of-type(1) {
          position: absolute;
          top: 60px;
          left: 40px;
          font-size: 36px;
          font-weight: 700;
        }

        div:nth-of-type(2) {
          position: absolute;
          top: 134px;
          left: 40px;
        }

        div:nth-of-type(3) {
          position: absolute;
          top: 38px;
          left: 465px;
          font-size: 56px;
          font-weight: 700;
          color: #EE7107;
        }

        div:nth-of-type(4) {
          position: absolute;
          top: 120px;
          left: 436px;
          width: 200px;
          height: 60px;
          line-height: 60px;
          border-radius: 30px;
          font-size: 28px;
          text-align: center;
          color: #fff;
          background-color: #343130;
        }
      }

      .title1 {
        height: 100px;
        line-height: 100px;
        padding-left: 24px;
        font-size: 32px;
        font-weight: 700;
        color: #F77F11;
      }

      .starContainer {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        align-content: space-between;

        .starItem {
          position: relative;
          width: 330px;
          height: 140px;

          img {
            position: absolute;
            left: 20px;
            width: 100px;
            height: 100px;
          }

          div:nth-of-type(1) {
            position: absolute;
            top: 20px;
            left: 120px;
          }

          div:nth-of-type(2) {
            position: absolute;
            top: 60px;
            left: 120px;
            font-size: 24px;
            color: #A3A3A3;
          }
        }
      }

      .deliver {
        position: relative;
        width: 690px;
        height: 184px;
        margin: 0 auto 28px;
        border-radius: 6px;
        background-color: rgba(249, 249, 249, 100);

        div:nth-of-type(1) {
          position: absolute;
          top: 50px;
          left: 30px;
          font-weight: 700;
        }

        div:nth-of-type(2) {
          position: absolute;
          top: 100px;
          left: 30px;
          color: #9F9F9F;
        }

        img {
          position: absolute;
          top: 30px;
          right: 30px;
          width: 316px;
          height: 124px;
        }
      }

      .title2 {
        padding-left: 24px;
        font-size: 32px;
        font-weight: 700;
        color: #F77F11;

        i {
          font-size: 24px;
          color: #000;
          margin-left: 40px;
          font-weight: 400;

        }
      }

      .section {
        width: 660px;
        margin: 28px auto 0;

        i {
          color: #e31e35;
        }
      }

      .image {
        display: block;
        width: 632px;
        height: 240px;
        margin: 28px auto 0;
      }

      .tip {
        height: 80px;
        line-height: 80px;
        padding-left: 28px;

        i {
          color: #e31e35;
        }
      }

      .tips {
        height: 70px;
        // line-height: 50px;
        padding-left: 28px;
      }

      .line {
        width: 654px;
        height: 1px;
        margin: 0 auto;
        background-color: #BBBBBB;
      }

      .boxContainer {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 50px;

        .boxItem {
          position: relative;
          width: 568px;
          height: 152px;
          margin-top: 30px;
          border-radius: 12px;
          box-sizing: border-box;
          background-color: rgba(250, 235, 235, 100);
          border: 1px solid rgba(243, 212, 212, 100);

          .boxDiscount {
            width: 203px;
            height: 101px;
            border-right: 1px dashed rgba(243, 212, 212, 100);
            font-size: 50px;
            text-align: center;
            line-height: 101px;
          }

          .boxName {
            position: absolute;
            top: 14px;
            left: 222px;
            font-size: 32px;
          }

          .boxDesc {
            position: absolute;
            top: 56px;
            left: 222px;
            font-size: 24px;
            color: #999;
          }

          img {
            position: absolute;
            width: 120px;
            height: 120px;
            top: 0;
            right: 0;
            z-index: 100;
          }

          .boxTips {
            position: absolute;
            bottom: 0;
            width: 568px;
            height: 50px;
            box-sizing: border-box;
            line-height: 50px;
            color: #999999;
            border-top: 1px dashed rgba(243, 212, 212, 100);
            padding-left: 36px;
            font-size: 24px;
          }

        }
      }

      .btn {
        width: 658px;
        height: 100px;
        margin: 0 auto;
        margin-top: 15px;
        line-height: 100px;
        text-align: center;
        font-size: 32px;
        border-radius: 60px;
        background-color: #FFD784;
      }

      .section2 {
        width: 660px;
        margin: 0 auto 5px;

        i {
          color: #e31e35;
        }
      }
    }
  }
}
